<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>媒体对象</title>
</head>
<body>
    <div class="container">
        <!-- 默认媒体对象 -->
        <div class="media">
            <img src="../images/logo.PNG" height="60px" width="140px" alt="">
            <div class="media-body ml-2">
                <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
            </div>
        </div>
        <div class="media">
            <!-- 修改媒体对象 -->
            <img src="../images/img.png" class="rounded-circle" height="60px" width="140px" alt="">
            <div class="media-body ml-2">
                <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
            </div>
        </div>
        <!-- 嵌套媒体对象 -->
        <div class="media">
            <img src="../images/img.png" class="rounded-circle" height="60px" width="140px" alt="">
            <div class="media-body ml-2">
                <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                <!-- 把一个媒体对象放在另一个媒体对象的.media-body内形成嵌套 -->
                <div class="media">
                    <img src="../images/logo.PNG" height="60px" width="140px" alt="">
                    <div class="media-body ml-2">
                        <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                        <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 媒体对象的水平对齐：把img放在media-body后面，媒体内容会自动对齐到最右边 -->
        <div class="media">
            <div class="media-body ml-2">
                <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
            </div>
            <img src="../images/logo.PNG" height="60px" width="140px" alt="">
        </div>
        <!-- 媒体对象的垂直对齐 -->
        <div class="media">
            <!-- 垂直居中对齐： .align-self-center-->
            <!-- 垂直底部对齐： .align-self-end-->
            <img src="../images/logo.PNG" class="align-self-center" height="60px" width="140px" alt="">
            <div class="media-body ml-2">
                <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国。</p>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国。</p>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国。</p>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国。</p>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国。</p>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国。</p>
            </div>
        </div>
        <!-- 媒体对象列表 -->
        <!-- .list-unstyle去除无序列表的圆点 -->
        <ul class="list-unstyle">
            <!-- .media放在li标签上 -->
            <li class="media">
                <img src="../images/logo.PNG"  height="60px" width="140px" alt="">
                <div class="media-body ml-2">
                    <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                    <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                </div>
            </li>
            <li class="media">
                <img src="../images/logo.PNG"  height="60px" width="140px" alt="">
                <div class="media-body ml-2">
                    <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                    <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                </div>
            </li>
            <li class="media">
                <img src="../images/logo.PNG"  height="60px" width="140px" alt="">
                <div class="media-body ml-2">
                    <h4>NIIT <small><i>2023年12月1日</i></small></h4>
                    <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                </div>
            </li>

        </ul>
    </div>
</body>
</html>